<template>
	<view>
		<view class="login_top relative">
			<image src="../../static/img/login_bg.png" class="bg w100"></image>
			<view class="absolute w100 flex align-center justify-center" style="height: 100%;top: 0;left: 0;">
				<image :src="conf.web_site_logo" class="logo"></image>
			</view>
		</view>
		<view class="padding-x-60 margin-top-30">
			<view class="relative">
				<text class="fs-40 color-000 relative" style="z-index: 1;">注册</text>
				<image src="../../static/img/login_icon.png" style="width: 36rpx;height: 36rpx;position: absolute;left: 56rpx;top:14rpx"></image>
			</view>
			
			<view class="padding-40 radius10 box_shadow margin-top-40">
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon1.png"></image>
					<input type="text" v-model="info.mobile" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请输入手机号">
				</view>
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon2.png"></image>
					<view class="flex align-center justify-between  margin-left-20 ipt">
						<input  v-model="code.captcha" type="text" class="fs-28 color-999 flex1" placeholder="请输入图形验证码">
						<image class="login_code_img" :src="src" mode="aspectFill" @tap="init()"></image>
					</view>
				</view>
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon2.png"></image>
					<view class="flex align-center justify-between  margin-left-20 ipt">
						<input v-model="info.code" type="text" class="fs-28 color-999 flex1" placeholder="请输入验证码">
						<button :disabled="code.status" class="login_code" style="margin-bottom: 4rpx;" @tap="getCode()">{{code.text}}</button>
					</view>
				</view>
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon3.png"></image>
					<input type="password" v-model="info.loginpass" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请设置密码">
				</view>
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon3.png"></image>
					<input type="password" v-model="info.quepass" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请确认密码">
				</view>
				<view class="flex align-center justify-between margin-bottom-30" @tap="selarea()">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon5.png"></image>
					<input type="text" disabled v-model="area" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="点击选择所在地区">
				</view>
				<view class="flex align-center justify-between margin-bottom-30">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon1.png"></image>
					<input type="text" v-model="info.regcode" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请输入邀请码(选填)">
				</view>
				
				<view @tap="submit()" class="public_btn margin-top-60">注册</view>
				<view @tap="jump('/pages/public/login')" class="flex align-center justify-center margin-top-20">
					<text class="fs-24 color-zhuse">去登录</text>
					<image src="../../static/img/next_zs.png" style="width: 22rpx;height: 22rpx;"></image>
				</view>
			</view>
			
		</view>
		
		<view @tap="onTcp" class="fs-24 color-999 margin-y-30 flex align-center justify-center text-center w100" style="bottom: 20rpx;">
			<radio class="tcp-radio brown" :class="{ checked: isTcp }" :checked="isTcp"></radio>
			<view>我已阅读并同意<text @tap.stop="jump('/pages/public/xieyi')" class="color-zhuse">《用户协议》</text>和<text @tap.stop="jump('/pages/public/yinsi')" class="color-zhuse">《隐私政策》</text></view>
		</view>
		
		<uni-popup ref="area" type="bottom">
			<view class="area_wrap bg-fff padding-40 radius-top30 relative">
				<image class="area_close" src="../../static/img/close_icon.png" mode="aspectFit" @tap="close()"></image>
				<view class="fs-32 fw-bold text-center">请选择地区</view>
				<view class="flex align-center padding-y-30">
					<text class="area_sel text-cut padding-x-16" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
					<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
				</view>
				<scroll-view scroll-y class="area_box padding-y-40">
					<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
						<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'',
				uuid:'',
				code: {
					text: '获取验证码',
					status: false,
					captcha:'',
				},
				info:{
					mobile:'',
					code:'',
					loginpass:'',
					quepass:'',
					regcode:'',
					province:'',
					city:'',
					area:'',
				},
				conf:{},
				isTcp: false, //协议
				
				area:'',
				list:[],
				arr:[],
				current:-1,
				textCurrent:0,
				hasMore:true
			}
		},
		onLoad() {
			this.init();
			this.getInfo();
			this.conf = JSON.parse(uni.getStorageSync('conf'))
		},
		methods:{
			onTcp() {
				this.isTcp = !this.isTcp;
			},
			getInfo() {
				this.$api.get_img_code().then(res => {
					if (res.code == 1) {
						this.src = res.data.img_src;
						this.uuid = res.data.uuid;
					}
				})
				
				this.$api.conf().then(res => {
					if (res.code == 1) {
						
					}
				})
			},
			
			
			reset(){
				this.list = [];
				this.arr = [];
				this.current = -1;
				this.textCurrent = 0;
				this.area = '';
				this.init();
			},
			init(region){
				var data = {
					region: region || ''
				}
				this.$api.getRegion(data).then(res => {
					if(res.code == 1){
						this.list = res.data;
						if(this.list.length > 0){
							this.list.forEach((m,i)=>{
								if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
									this.current = i;
								}
							})
						}
					}else{
						if(res.data.length == 0){
							console.log("----")
							this.hasMore = false
							this.area = '';
							this.arr.forEach((item, index)=>{
								this.area += item.label;
							})
							this.$refs.area.close();
						}else{
							console.log("=====")
							this.hasMore = true
						}
					}
				});
			},
			toggle(item, index){
				this.current = index;
				this.init(item.value);
				this.arr[this.textCurrent] = item;
				if(this.textCurrent+1 < this.arr.length){
					this.arr = this.arr.slice(0, this.textCurrent+1)
				}
				this.textCurrent++;
				this.current = -1;
			},
			selarea(){
				this.$refs.area.open();
				if(!this.hasMore){
					if(this.arr.length == 1){
						this.textCurrent = this.arr.length - 1;
						this.init();
					}
					if(this.arr.length > 1){
						this.textCurrent = this.arr.length - 1;
						this.init(this.arr[this.arr.length - 2].value || '');
					}
					if(this.arr.length == 0){
						this.reset();
					}
				}
			},
			selText(item, index){
				this.textCurrent = index;
				if(index == 0){
					this.init();
				}else{
					this.init(this.arr[index-1].value);
				}
			},
			close(){
				if(this.arr.length < 3){
					this.reset();
				}
				this.$refs.area.close();
			},
			
			
			getCode(){
				let data = {
					mobile:this.info.mobile,
					type:'register',
					uuid:this.uuid,
					captcha:this.code.captcha
				}
				let countdown = 60;
				this.code.status = true;
				this.$api.send_sms(data).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						this.code.text = countdown + '秒后重新获取';
						this.code.status = true;
						let timer = setInterval(() => {
							if (countdown > 0) {
								this.code.text = countdown - 1 + '秒后重新获取';
								countdown--;
							} else {
								clearInterval(timer);
								this.code.text = '获取验证码';
								this.code.status = false;
							}
						}, 1000);
					} else {
						this.code.status = false;
					}
				});
			},
			submit() {
				if(!this.isTcp){
					this.$msg('请阅读并同意《用户协议》和《隐私政策》');
					return false;
				}
				if(this.arr.length){
					this.info.province = this.arr[0].value;
					this.info.city = this.arr[1].value;
					this.info.area = this.arr[this.arr.length - 1].value;
				}
				this.$api.register(this.info).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/public/login`
							})
						}, 200)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tcp-radio {
		// transform: scale(0.8);
	}
	.login_top{
		height: 386rpx;
		.bg{
			height: 386rpx;
		}
		.logo{
			width: 148rpx;
			height: 148rpx;
			border-radius: 100%;
		}
	}
	.ipt{
		height: 70rpx;
		border-bottom: 1rpx solid rgba(134, 134, 134, 0.15);
	}
	.public_btn{
		background: linear-gradient(to bottom,#FDA932,#FE951E,#FE8009);
		border-radius: 100rpx;
	}
	/deep/ .uni-checkbox-input{border-radius: 100%;transform: scale(0.76);}
</style>
